<template>
  <div class="reg-step">
    <ul class="steps">
      <li
        class="step"
        v-for="(item, index) in steps"
        :key="index"
        :class="getComputedClass(index)"
      >
        <span class="step__icon"></span>
        <span class="step__label">{{ item }}</span>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps(['current']);

const steps = ['填写求职意向', '完善信息', '教育经历', '工作经历'];

function getComputedClass(index: number) {
  if (props.current > index) {
    return {
      'step--complete': true,
      'step--active': false,
    };
  } else if (props.current === index) {
    return {
      'step--complete': false,
      'step--active': true,
    };
  }
}
</script>

<style lang="less">
@import '@/styles/step.less';
.flexAbsoluteCenter() {
  display: flex;
  justify-content: center;
  align-items: center;
}
.reg-step {
  width: 100%;
  background: #fff;
  padding: 0 327px;
  padding-top: 60px;
  padding-bottom: 0;
  box-sizing: border-box;
  .flexAbsoluteCenter();

  .steps .step {
    &::before {
      width: 50%;
    }
  }

  .steps .step:not(:last-child):before,
  .steps .step:not(:last-child):after {
    transform: translate(46%, -50%);
    height: 1px;
  }
  .steps {
    .step:before {
      background-color: #e5e5e5;
    }
  }
}
</style>
